import React from 'react'
import { AccordionItem} from 'react-sanfona'
import classNames from 'classnames'

import 'normalize.css'


export class CustomAccordionItem extends React.Component {
    classesWhenClosed = 'fa fa-angle-double-left'
    classesWhenOpen = 'fa fa-angle-double-down'
    constructor (props){
        super(props)
        this.onExpand = this.onExpand.bind(this)
        this.onClose = this.onClose.bind(this)
    }

    state = {
        titleClassName: this.props.expanded ? classNames(this.classesWhenOpen):  classNames(this.classesWhenClosed),
    }


    onExpand (e){
        this.setState({
            titleClassName : classNames( this.classesWhenOpen ),
        })
    }


    onClose (){
        this.setState({
            titleClassName : classNames( this.classesWhenClosed ),
        })
    }

    render (){
        const {title,key, expanded, children, ...attributes} = this.props
        return (
            <AccordionItem
                duration={700}
                easing={'cubic-bezier(0.420, 0.000, 0.580, 1.000)'}
                titleTag={'div'}
                onExpand={this.onExpand}
                onClose={this.onClose}
                title={title}
                key={key}
                titleClassName={this.state.titleClassName}
                expanded={expanded}
                {...attributes}
            >
                {children}
            </AccordionItem>
        )
    }

}
